<template>
  <div id="box">
      <!-- 头部 -->
      <div class="header">
        <span class="iconfont icon-erji"></span>
        <span>我的</span>
        <span class="iconfont icon-shezhi1"></span>
      </div>
    <div class="box">
      <!-- 用户 -->
      <div class="userbox">
        <div class="user" @click="zhuce()">
          <img src="@/assets/logo.png" alt class="tx" />
          <span class="phone">17****47</span>
        </div>
        <div class="jifen" @click="jf()">
          <span class="iconfont icon-jifen"></span>
          <span>我的积分</span>
        </div>
      </div>
      <!--  -->
      <div class="browse">
        <Metwo v-for="(v ,i) in this.$store.state.mem.gj.metwo" :key="i" :tubiao="v.tubiao" :name="v.name"></Metwo>
        
      </div>
      <!-- 工具 -->
      <div class="gj">
          <h2>我的工具</h2>
          <div class="gj">

        <Gongju v-for="(v ,i) in this.$store.state.mem.gj.gongju" :key="i" :tubiao="v.tubiao" :name="v.name"></Gongju>
          </div>
      </div>
      <Lunbo :listData="this.$store.state.mem.gj.lunbo" ></Lunbo>
      <Yezhu></Yezhu>
    </div>
    <BottomBar></BottomBar>
  </div>
</template>

<script>
import BottomBar from "@/components/bottomBar.vue";
import Gongju from "@/components/mes/gongju.vue";
import Lunbo from "@/components/mes/lunbo.vue";
import Yezhu from "@/components/mes/yezhu.vue";
import Metwo from "@/components/mes/metwo.vue";



export default {
  methods: {
    jf() {
      this.$router.push("/integral");
    },
    zhuce(){
      this.$router.push("ringUp")
    }
  },
  components: {
    BottomBar,
     Gongju,
     Lunbo,
     Yezhu,
     Metwo,
  },
  mounted(){
    this.$store.dispatch('meact')
  }
};
</script>

<style scoped>
#box{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}
.box {
  padding: 0 20px;
    overflow-y: auto;
    flex: 1;
}
.header {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  text-align: center;
}
.header span {
  flex: 1;
  color: #212121;
  font-size: 16px;
}
.userbox {
  display: flex;
  width: 100%;
  height: 64px;
  justify-content: space-between;
  padding: 5px 20px;
  /* background: cyan; */
}
.user {
  display: flex;
}
.tx {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.phone {
  line-height: 60px;
  margin-left: 10px;
  font-size: 15px;
}
.jifen {
  width: 106px;
  height: 40px;
  border: 1px solid #ccc;
  font-size: 10px;
  color: #999;
  border-radius: 20px;
  display: flex;
  text-align: center;
  margin-top: 10px;
}
.jifen span {
  flex: 1;
  line-height: 40px;
}
/*  */
.browse {
  display: flex;
  height: 100px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
/* .browse dd {
  font-size: 27px;
} */
/* 工具 */
h2{
    font-weight: 600;
}
.gj{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
}
</style>